import React, { useState, useEffect } from 'react';

import { role_list, staff_search, staff_del, staff_add,staff_edit } from '../../../utils/api'

import { message, Input, Button, Space, Table, Modal, Tag, Form, Select } from 'antd';
var { Search } = Input;

function StaffManager(props) {

    const [form] = Form.useForm();

    //引入组件状态
    //权限列表
    var [Rolelist, setRolelist] = useState([])
    //是否弹框
    var [isModalOpen_1, setIsModalOpen_1] = useState(false)
    var [isModalOpen_2, setIsModalOpen_2] = useState(false)
    //表格数据
    var [data, setData] = useState([])
    //最新页码
    var [current, setCurrent] = useState(1)
    //总数
    var [total, setTotal] = useState(100)
    //每页条数
    var [pageSize, setPageSize] = useState(10)
    // 搜索内容
    var [searchKey,setSearchKey] = useState('')
    //  loading 动画
    var [loading,setLoading]=useState(false)

   

    // 模糊搜素
    const onSearch = (value) => {
        setLoading(true);
        staff_search({ searchKey: value, page: current, count: pageSize  }).then((res) => {
            setData(res.data.list)
            setTotal(res.data.total);
            setSearchKey(value)
            setLoading(false);
        })
    };

    // 删除员工信息
    const deleteStaff = (_id) => {
        console.log(_id);
        staff_del({ id: _id, searchKey, page: current, count: pageSize}).then((res) => {
            message.success('删除成功');
            setTotal(res.data.total)
            setData(res.data.list)
        })
    }

    // 新增客服弹窗显示
    const showModal_1 = () => {
        setIsModalOpen_1(true);
    };
    const handleCancel_1 = () => {
        setIsModalOpen_1(false);
      };
    // 新增客服
    var onFinish_1 = (values) => {
        staff_add(values).then((res) => {
            if (res.data.code == 200) {
                message.success('注册成功');
                setIsModalOpen_1(false)
            } else {
                message.error('注册失败');
            }
        })

    };

    // 编辑客服弹窗显示
    const showModal_2 = (text) => {
        setIsModalOpen_2(true);
        text=JSON.parse(JSON.stringify(text))
        text.role=text.role._id
        form.setFieldsValue(text)
       
    };
    const handleCancel_2 = () => {
        setIsModalOpen_2(false);
      };
    // 编辑客服
    var onFinish_2 = (values) => {
        staff_edit(values).then((res) => {
            if (res.data.code == 200) {
                message.success('更新成功');
                setIsModalOpen_2(false)
            } else {
                message.error('更新失败');
            }
        })

    };

    // =========================================
    //表格分页
    const onChange = ({ current, pageSize, total }) => {
        setCurrent(current);//保存最新页码
        setLoading(true);
        //请求最新页码对应的列表
        staff_search({ searchKey, page: current, count: pageSize }).then((res) => {
            setData(res.data.list);
            setTotal(res.data.total);
            setLoading(false);
        })
    };

    // 引入生命周期
    useEffect(() => {
        //获取角色列表
        role_list().then((res) => {
            setRolelist(res.data.list)
        })
        //获取员工列表
        staff_search({ searchKey: '', page: 1, count: 10 }).then((res) => {
            setData(res.data.list);
            setTotal(res.data.total);
        })
    }, [])

    // 表格列信息
    const columns = [
        {
            title: '账号', //表格头
            dataIndex: 'user', //表格列的数据索引
            key: 'user'
        },
        {
            title: '昵称',
            dataIndex: 'nickname',
            key: 'nickname',
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '手机号',
            dataIndex: 'phone',
            key: 'phone',
        },
        {
            title: '角色',
            key: 'role',
            render: (text) => {
                return (<Tag color="#2db7f5">{text.role.name}</Tag>)
            }
        },
        {
            title: '操作',
            key: 'action',
            render: (text) => (
                <Space size="middle">
                    <i className='iconfont icon-bianji'  onClick={() => { showModal_2(text) }}></i>
                    <i className='iconfont icon-shanchu' onClick={() => { deleteStaff(text._id) }}></i>
                </Space>
            ),
        },
    ];

    return (
        <div className='manager'>
            <h2>员工管理</h2>
            <div className='search'>
                <Search
                    placeholder="输入员工姓名"
                    onSearch={onSearch}
                    style={{ width: 320 }}
                    enterButton
                />
                <Button className='btn' type="primary"  onClick={showModal_1}>新增客服</Button>
            </div>
            {/* 表格 */}
            <Table  loading={loading} columns={columns} dataSource={data} pagination={{ current, pageSize, total }} onChange={onChange} />

            {/* 新增客服弹窗 */}
            <Modal title="新增客服" footer={null} open={isModalOpen_1} onCancel={handleCancel_1}>
                <Form   onFinish={onFinish_1}>
                    <Form.Item
                        name="user"
                        rules={[
                            {
                                required: true,
                                message: '请输入账号!',
                            },
                        ]}
                    >
                        <Input placeholder="账号" />
                    </Form.Item>

                    <Form.Item
                        name="nickname"
                        rules={[
                            {
                                required: true,
                                message: '请输入昵称!',
                            },
                        ]}
                    >
                        <Input placeholder="昵称" />
                    </Form.Item>

                    <Form.Item
                        name="name"
                        rules={[
                            {
                                required: true,
                                message: '请输入姓名!',
                            },
                        ]}
                    >
                        <Input placeholder="姓名" />
                    </Form.Item>

                    <Form.Item
                        name="phone"
                        rules={[
                            {
                                required: true,
                                message: '请输入手机号!',
                            },
                        ]}
                    >
                        <Input placeholder="手机号" />
                    </Form.Item>

                    <Form.Item
                        name="role"
                        rules={[
                            {
                                required: true,
                                message: '请选择角色!',
                            },
                        ]}
                    >
                        <Select placeholder="请选择角色!">
                            {
                                Rolelist.map((item, index) => {
                                    return (
                                        <Select.Option key={index} value={item._id}>{item.name}</Select.Option>
                                    )
                                })
                            }
                        </Select>
                    </Form.Item>

                    <Form.Item>
                        <Button block type="primary" htmlType="submit" shape="round">
                            新增客服
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>

            {/* 编辑员工弹窗 */}
            <Modal title="新增客服" footer={null} open={isModalOpen_2} onCancel={handleCancel_2}>
                <Form onFinish={onFinish_2} form={form}>
                    <Form.Item
                        name="_id"
                        hidden
                        rules={[
                            {
                                
                                required: true,
                                message: '请输入id',
                            },
                        ]}
                    >
                        <Input placeholder="id" />
                    </Form.Item>
                    {/* 需要这两个数据，但要求不显示 */}
                    <Form.Item
                        name="pass"
                        hidden
                        rules={[
                            {
                                
                                required: true,
                                message: '请输入密码',
                            },
                        ]}
                    >
                        <Input placeholder="密码" />
                    </Form.Item>
                    
                    <Form.Item
                        name="user"
                        rules={[
                            {
                                
                                required: true,
                                message: '请输入账号!',
                            },
                        ]}
                    >
                        <Input  placeholder="账号" />
                    </Form.Item>

                    <Form.Item
                        name="nickname"
                        rules={[
                            {
                                required: true,
                                message: '请输入昵称!',
                            },
                        ]}
                    >
                        <Input   placeholder="昵称" />
                    </Form.Item>

                    <Form.Item
                        name="name"
                        rules={[
                            {
                                required: true,
                                message: '请输入姓名!',
                            },
                        ]}
                    >
                        <Input  placeholder="姓名" />
                    </Form.Item>

                    <Form.Item
                        name="phone"
                        rules={[
                            {
                                required: true,
                                message: '请输入手机号!',
                            },
                        ]}
                    >
                        <Input  placeholder="手机号" />
                    </Form.Item>

                    <Form.Item
                        name="role"
                        rules={[
                            {
                                required: true,
                                message: '请选择角色!',
                            },
                        ]}
                    >
                        <Select  placeholder="请选择角色!">
                            {
                                Rolelist.map((item, index) => {
                                    return (
                                        <Select.Option key={index} value={item._id}>{item.name}</Select.Option>
                                    )
                                })
                            }
                        </Select>
                    </Form.Item>

                    <Form.Item>
                        <Button block type="primary" htmlType="submit" shape="round">
                            确认更新
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>

        </div>
    );
}

export default StaffManager;